<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="收货人" prop="accept">
        <el-input v-model="ruleForm.accept"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="cellphome">
        <el-input v-model="ruleForm.cellphome"></el-input>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <el-select v-model="ruleForm.province" placeholder="请选择省份" @change="selectProvince" value-key="id">
          <el-option :label="province.name" :value="province" v-for="province in provinceList" :key="province.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-select v-model="ruleForm.city" placeholder="请选择城市" @change="selectCity" value-key="id">
          <el-option :label="city.name" :value="city" v-for="city in cityList" :key="city.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区县" prop="county">
        <el-select v-model="ruleForm.county" placeholder="请选择区县" @change="selectCounty" value-key="id">
          <el-option :label="county.name" :value="county" v-for="county in countyList" :key="county.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="detailaddress">
        <el-input v-model="ruleForm.detailaddress"></el-input>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="8" :offset="16" style="text-align: right">
        <el-button type="info" @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default{
  data() {
      return {
        ruleForm: {
          accept: '',
          cellphome: '',
          province: '',
          city:'',
          county:'',
          detailaddress:''
        },
        rules: {
          accept: [
            { required: true, message: '请输入收货人信息', trigger: 'blur' }
          ],
          cellphome: [
            { required: true, message: '请输入正确的手机号', trigger: 'blur' }
          ],
          province: [
            { required: true, message: '请选择省份', trigger: 'change' }
          ],
          city: [
            { required: true, message: '请选择城市', trigger: 'blur' }
          ],
          county: [
            { required: true, message: '请选择区县', trigger: 'blur' }
          ],
          detailaddress: [
            { required: true, message: '请填写详细收货地址', trigger: 'blur' }
          ]
        },
        provinceList:[],
        cityList:[],
        countyList:[]
      };
    },
    methods: {
      selectProvince(province){
        console.log(province)
        // 清理之前选中城市、区县的信息
        this.ruleForm.city = ''
        this.ruleForm.county = ''
        this.cityList = province.children
      },
      selectCity(city){
        console.log(city)
        // 清理区县
        this.ruleForm.county = ''
        this.countyList = city.children
      },
      selectCounty(county){
        console.log(this.ruleForm)
      },
      cancel(){
        // 通过自定义事件的方式实现向上反馈结果
        this.$emit("close")
      },
      submit(){
        // 整理数据   copy 对象
        let temp = JSON.parse(JSON.stringify(this.ruleForm))
        temp.province = temp.province.name
        temp.city = temp.city.name
        temp.county = temp.county.name
        
        // 别在子组件中发请求向后台添加数据的操作：因为组件做不到通用
        // 可以通过自定义事件传数据给父组件
        this.$emit("submit", temp)
      }
    },
    mounted(){
      // 只请求省份信息
      this.$axios.get("/address/pccList").then(res =>{
        this.provinceList = res.data.data
      })
    }
}
</script>

<style scoped>

</style>